<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap.min.css" />

    <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <script src="./js/plugins/holder/holder.js"></script>
    <title>订单结算页</title>

    <style>
      
      .card-body{
        border-bottom: 1px solid #f4f4f4;
        font-size:0.9em;
      }

       .order-address   {
         display: flex;
         justify-content: flex-start;
         flex-wrap: wrap;
         color:#5e5b5b;
         cursor: pointer;
         margin-left: 10px;
       }

       .order-address dt{
         padding:1px 3px;
       }
       .order-address dd:nth-child(2){
         width:80px;
         text-align: center; 
         padding:0px 3px;
       }

       .order-address dd:nth-child(3){
         min-width:300px; 
         padding:0 10px;
       }

       .order-address dd:nth-child(4){
         width:120px; 
         padding:0 10px;
       }

       .order-address dd:last-of-type a{
          display: none;
       }

       .order-address:hover dd:last-of-type a{
         display: inline;
       }

       .order-count div{
         display:flex;
         justify-content: end;
         font-size:0.8em;
         color:#474545
       }

       .order-count div p:last-of-type{
            width:120px;
            text-align: right;
       }

       .order-sum{
         background-color: #F4F4F4;
       }

      .order-address:has(input:checked){
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light nvarbar-padding">
      <div class="container">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarText">
          <span class="navbar-text me-auto">
            欢迎光临,请 <a href="#">登录</a> 成为会员
          </span>

          <ul class="navbar-nav mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="my.html">我的</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 顶部导航 end-->

    <main class="container">
        <!-- 搜素框 -->
        <div class="row align-items-center mt-3">
          <div class="col-auto">
            <a href="#">
              <img src="./images/logo.png" alt="" />
            </a>
          </div>  
          <div class="col-auto mt-lg-0 mt-3  ">
             订单结算页
          </div>
        </div>
        <!-- 搜素框 end -->
      </main>

      <div class="container">
          <div class="row">
              <div class="col">
                <div class="card">
                  <div class="card-header">
                    填写并核对订单信息
                  </div>
                  <div class="card-body">
                    <h5 class="card-title">收货人信息</h5>                    
                    <p class="card-text" id="addressContent">
                      <!-- 一条收货地址
                      <dl class="order-address">
                        <dt> <input type="radio" name="address"> </dt>
                        <dd>张三</dd>
                        <dd>湖南省长沙市农大路一号</dd>
                        <dd>135****1234</dd>                         
                        <dd>
                          <span>默认地址</span> <a href="#">删除</a> <a href="#">修改</a> 
                        </dd>
                      </dl>
                       一条收货地址 end-->
                      <!-- 一条收货地址
                      <dl class="order-address">
                        <dt> <input type="radio" name="address"> </dt>
                        <dd>李思思</dd>
                        <dd>湖南省长沙市农大路一号 xx宿舍第二栋 3-202</dd>
                        <dd>135****1234</dd>                         
                        <dd>
                          <a href="#">设为默认</a> <a href="#">删除</a> <a href="#">修改</a> 
                        </dd>
                      </dl>
                       一条收货地址 end-->
                      <!-- 一条收货地址
                      <dl class="order-address">
                        <dt> <input type="radio" name="address"> </dt>
                        <dd>欧阳六六</dd>
                        <dd>湖南省长沙市农大路一号 xx宿舍 3-202</dd>
                        <dd>135****1234</dd>                         
                        <dd>
                          <a href="#">设为默认</a> <a href="#">删除</a> <a href="#">修改</a> 
                        </dd>
                      </dl>
                         一条收货地址 end-->
                    </p>                     
                    <a href="#" data-bs-toggle="modal" data-bs-target="#newAddress">新增地址</a>
                  </div>
                  <!-- 支付方式  -->
                  <div class="card-body">
                    <h5 class="card-title"> 支付方式 </h5>
                    <div class="card-text">
                      <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
                      <label class="btn btn-outline-success" for="success-outlined">在线支付</label>

                      <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
                      <label class="btn btn-outline-danger" for="danger-outlined">货到付款</label>
                    </div>
                  </div>
                   <!-- 支付方式  end-->
                   <!-- 送货清单 -->
                   <div class="card-body">
                     <h5 class="card-title">送货清单</h5>
                     <div class="card-text" id="orderListContext">
                          <!-- 一条商品信息 -->
                          <div class="row cart-info align-items-center mt-3">        
                            <div class="col-lg-5 col-md-6 col-12">
                              <img src="holder.js/60x60" alt=""/>
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-3">￥ 23.00</div>
                            <div class="col-lg-2 col-4">
                              <div class="input-group input-group-sm justify-content-center">
                                x2
                              </div>
                            </div>
                            <div class="col-3  d-lg-block">￥ 46.00</div>         
                          </div>
                          <!-- 一条商品信息  end-->
                           <!-- 一条商品信息 -->
                           <div class="row cart-info align-items-center mt-3">        
                            <div class="col-lg-5 col-md-6 col-12">
                              <img src="holder.js/60x60" alt=""/>
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-3">￥ 23.00</div>
                            <div class="col-lg-2 col-4">
                              <div class="input-group input-group-sm justify-content-center">
                                x2
                              </div>
                            </div>
                            <div class="col-3  d-lg-block">￥ 46.00</div>         
                          </div>
                          <!-- 一条商品信息  end-->
                           <!-- 一条商品信息 -->
                           <div class="row cart-info align-items-center mt-3">        
                            <div class="col-lg-5 col-md-6 col-12">
                              <img src="holder.js/60x60" alt=""/>
                              Java从入门到精通（第6版）【软件开发视频大讲堂】
                            </div>
                            <div class="col-lg-2 col-3">￥ 23.00</div>
                            <div class="col-lg-2 col-4">
                              <div class="input-group input-group-sm justify-content-center">
                                x2
                              </div>
                            </div>
                            <div class="col-3  d-lg-block">￥ 46.00</div>         
                          </div>
                          <!-- 一条商品信息  end-->
                     </div>
                   </div>
                   <!-- 送货清单 end-->

                </div>
              </div>
              <div class="row mt-3 ">
                <div class="col order-count" id="orderAccountDetailContainer">
                  <div><p>3件商品，总商品金额：</p> <p>￥234.56</p></div>
                  <div><p>运费：</p><p>￥0.00</p></div>
                  <div><p>返现：</p><p>-￥50.00</p></div>
                </div>
              </div>
              <!-- 订单总金额 -->
              <div class="row order-sum align-items-center">
                <div class="col order-count mt-3" id="orderAccountContainer">
                  <div><p>应付总金额：</p> <p>￥184.56</p></div> 
                  <div><p style="min-width:500px">寄送至 湖南省长沙市农大路一号收件人：张三 135****1234</p></div>
                </div>
              </div>
              <!-- 订单总金额 end-->
              <div class="row mt-2">
                <div class="col order-count">
                  <div><p><button type="button" class="btn btn-danger">提交订单</button></p></div>  
                </div>
              </div>
          </div>
      </div>

      <!-- 新增地址模态框 -->
      <!-- Modal -->
      <div class="modal fade" id="newAddress" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">新增地址</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <input class="form-control form-control-sm mt-3" type="text" placeholder="收件人" >
              <input class="form-control form-control-sm mt-3" type="text" placeholder="详细地址">
              <input class="form-control form-control-sm mt-3" type="text" placeholder="手机号码">
              
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary">保持地址</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 新增地址模态框 end -->

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--<script src="./js/plugins/bootstrap@5.1.3/popper.min.js"></script>
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.min.js"></script>-->
    <script>

      let addressContent =document.querySelector("#addressContent");
      addressContent.innerHTML='';
      let orderListContext =document.querySelector("#orderListContext");
      let orderAccountContainer = document.querySelector("#orderAccountContainer");

      let orderAccountDetailContainer =document.querySelector("#orderAccountDetailContainer");

      fetch("../load.order").then(response=>response.json()).then(result=>{
         if(result.success){
           //加载地址
           let addresses = result.data.address;
           let addressItem='';
            for(let address of addresses){
              addressItem +=`
                    <dl class="order-address">
                      <dt> <input type="radio" name="address"  ${address.isDefault==1?'checked':''} > </dt>
                      <dd>${address.consignee}</dd>
                      <dd>${address.address}</dd>
                      <dd>${address.telphone}</dd>
                      <dd>
                         <a href="#" style="display:${address.isDefault==0?'inline':'none'}">设为默认</a> <a href="#">删除</a> <a href="#">修改</a>
                      </dd>
                    </dl>`;
            }
           addressContent.innerHTML =addressItem;
           //加载购物车数据
           let cart = result.data.cart;
           let cartItemValue='';
           for(let cartItem of cart.items){
             let book =cartItem.product;
             cartItemValue +=`
                         <div class="row cart-info align-items-center mt-3">
                            <div class="col-lg-5 col-md-6 col-12">
                              <img src="images/books/${book.pic}" style="width:60px;height:60px" alt=""/>
                              ${book.title}
                            </div>
                            <div class="col-lg-2 col-3">￥${book.price}</div>
                            <div class="col-lg-2 col-4">
                              <div class="input-group input-group-sm justify-content-center">
                                x${cartItem.qty}
                              </div>
                            </div>
                            <div class="col-3  d-lg-block">￥${book.price * cartItem.qty}</div>
                          </div>`;
           }
           orderListContext.innerHTML = cartItemValue;

           orderAccountDetailContainer.innerHTML=`
                  <div><p>${cart.items.length}件商品，总商品金额：</p> <p>￥${cart.account}</p></div>
                  <div><p>运费：</p><p>￥0.00</p></div>
                  <div><p>返现：</p><p>-￥0.00</p></div>
           `;

           orderAccountContainer.innerHTML =`
               <div><p>应付总金额：</p> <p>￥${cart.account}</p></div>
               <div><p style="min-width:500px"></p></div>
           `;

         }
      });
    </script>
  </body>
</html>
